<script setup lang='ts'>
import { useView } from '@/pages/tender/use-view'
import { useGetHomeNotice } from '@fl/api/man-api'
import { computed, ref, toRefs } from 'vue'

import Left from './Left.vue'
import Card from './card.vue'

defineOptions({
    name: 'Advantage',
})

const props = defineProps<{
    data: any
}>()

const { doLogin, userInfo } = useView()

const res: any = useGetHomeNotice({
    page: 1,
    size: 8,
})

const { data } = toRefs(props)

const list = ref<any>([])

const getItems = computed(() => {
    return data.value?.items ? data.value?.items.slice(0, 4) : []
})

function clickHandle(params: any) {
    console.log(params)
    if (!userInfo) {
        doLogin('/')
    }
}

watchEffect(() => {
    list.value = res.data.value?.records ?? []
})
</script>

<template>
    <div class="home-advantage w-full">
        <div class="advantage pb-40 pt-40 mx-auto mb-20 flex h-615 w-1300 justify-between items-center">
            <div v-if="getItems?.length"
                 class="h-536 w-610"
            >
                <div class="jc-home-title mb-40">
                    <span>我们的优势</span>

                    <p>OUR ADVANTAGES</p>
                </div>

                <Card :data="getItems"
                      @click-handle="clickHandle"
                />
            </div>

            <div class="p-20px bg-white h-536 w-610"
                 :class="{ '!w-full': !getItems?.length }"
            >
                <Left />
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.info-sty {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.home-advantage {
    background: url('https://public-obs-cdn.anjulian.com.cn/2024-05-28/d7be10a4-9b7c-4823-8a72-ed117bd5c1a9.png')
        0% 0% / 100% 100% no-repeat;
}

.advantage {
    .jc-home-title-icon {
        position: absolute;
        right: 0;
        top: 15px;
        height: 38px;
        width: 38px;
        line-height: 34px;
        text-align: center;
        font-size: 16px;
        border: 1px solid #aaa;
        border-radius: 38px;
        cursor: pointer;
    }

    .bids-collapse {
        :deep(.el-collapse-item__header),
        :deep(.el-collapse-item__wrap) {
            background: transparent;
        }
    }

    .bids-row {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bids-title {
            color: #da0004;
            font-size: 20px;
            font-weight: 600;
            width: 500px;
        }

        .coll-row {
            display: flex;

            .col-title {
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }
    }

    :deep(.el-collapse-item__header) {
        .el-collapse-item__arrow {
            display: none;
        }
    }
}
</style>
